<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>中国法学会课题管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{../layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{../website/css/website.css}" media="all">
    <link rel="stylesheet" th:href="@{../website/css/eleTree.css}" media="all">
    <link rel="stylesheet" th:href="@{../website/css/apexcharts.min.css}" media="all">
    <link rel="stylesheet" th:href="@{../website/css/formSelects-v4.css}" media="all">
    <link rel="icon" th:href="@{../website/images/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{../website/css/client.css}" media="all">
</head>
<body>
<div id="font-index" class="client-website-layout" lay-title="首页">
    <div class="layui-header layui-anim website-anim-down layui-row" id="client-header">
        <div class="layui-col-md3 logoDiv">
            <div class="layui-logo">
                <div class="logoDivInside layui-logo">
                    <img data-th-src="@{../website/images/logo.png}">
                    <span>中国法学会课题管理系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md2 layui-col-md-offset7">
            <ul class="layui-nav">
                <li class="layui-nav-item layui-hide-xs">
                    <button class="layui-btn layui-btn-radius layui-btn-sm" id="loginBtn">
                        <i class="layui-icon">&#xe66f;</i>登录
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-row front-row website-container">
        <div class="layui-col-md10 layui-col-sm10 layui-col-xs10 layui-col-md-offset1">
            <div class="layui-card layui-col-md12 layui-col-sm12 layui-col-xs12">
                <div class="layui-card-header">
                    <div class="layui-col-md-offset1 layui-col-md1 notice-header">
                        <i class="layui-icon">&#xe667;</i>&nbsp;通知公告
                    </div>
                    <div class="layui-col-md-offset9 layui-col-md1">
                        <button id="notice-more" class="layui-btn notice-more layui-btn-primary layui-btn-sm"><i
                                class="layui-icon">&#xe65f;</i></button>
                    </div>
                </div>
                <div class="layui-card-body layui-row">
                    <ul id="noticeIndexList" class="layui-col-md-offset1 layui-col-xs12 layui-col-sm12 layui-col-md10">

                    </ul>
                </div>
            </div>
            <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-col-md-offset1 layui-col-md1 result-header">
                            <i class="layui-icon">&#xe60a;</i>&nbsp;结果公示
                        </div>
                        <div class="layui-col-md-offset9 layui-col-md1">
                            <button id="result-more" class="layui-btn notice-more layui-btn-primary layui-btn-sm"><i
                                    class="layui-icon">&#xe65f;</i></button>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <ul id="resultIndexList"
                            class="layui-col-md-offset1 layui-col-xs12 layui-col-sm12 layui-col-md10">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{../layui/layui.js}"></script>
<script th:inline="javascript" type="text/javascript">
    var ctx = [[@{/}]];

        layui.use(['form', 'layer'], function (form, layer) {
            var $ = layui.jquery,
                login = [[${login}]];
            $("#notice-more").click(function () {
                window.location.href = ctx + "front/noticList";
            })
            $("#result-more").click(function () {
                window.location.href = ctx + "front/resultList";
            })
            $("#loginBtn").click(function () {
                window.location.href = ctx + "login";
            });
            initIndexNotice();
            initIndexResult();

            if (login){
                $('#client-header').hide()
            }


            function initIndexNotice() {
                $.ajax({
                    url: ctx + 'front/getIndexNotice',
                    async: false,
                    type: 'get',
                    data: {
                        pageSize: 8
                    },
                    success: function (data) {
                        if (!data || !data.data || data.data.lenght == 0) return '';
                        var html = ''
                        for (var i = 0; i < data.data.length && i <= 10; i++) {
                            item = data.data[i]
                            html += ' <li class="index_notice" notice_id ="' + item.noticeId + '">\n' +
                                '                                <a>\n' +
                                '                                    <div class="title layui-col-xs9 layui-col-sm9 layui-col-md9">'
                            html += item.title
                            html += '</div>\n' +
                                '                                        <div class="time layui-col-md-offset1 layui-col-xs2 layui-col-sm2 layui-col-md2">'
                            html += item.publishTime
                            html += ' </div>\n' +
                                '                                    </a>\n' +
                                '                                </li>'
                        }
                        $('#noticeIndexList').append(html)
                    }
                });

            }

            function initIndexResult() {
                $.ajax({
                    url: ctx + 'front/getIndexResult',
                    async: false,
                    type: 'get',
                    data: {
                        pageSize: 8
                    },
                    success: function (data) {
                        if (!data || !data.data || data.data.lenght == 0) return '';
                        var html = ''
                        for (item of data.data) {
                            html += ' <li class="index_notice" notice_id ="' + item.noticeId + '">\n' +
                                '                                <a>\n' +
                                '                                    <div class="title layui-col-xs9 layui-col-sm9 layui-col-md9">'
                            html += item.title
                            html += '</div>\n' +
                                '                                        <div class="time layui-col-md-offset1 layui-col-xs2 layui-col-sm2 layui-col-md2">'
                            html += item.publishTime
                            html += ' </div>\n' +
                                '                                    </a>\n' +
                                '                                </li>'
                        }
                        $('#resultIndexList').append(html)
                    }
                });

            }


            $('.index_notice').on('click', function () {
                var id = this.getAttribute('notice_id')
                window.location.href = ctx + "front/noticeDetail/" + id;
            })

        });
</script>
</body>
</html>

<style>
    .layui-nav {
        background-color: transparent;
    }

    .layui-nav .layui-nav-item {
        margin-left: 5px;
    }

    .logoDiv {
        transform: translateY(50%);
        font-size: 18px;
        color: #f0f0f0;
        width: 24%;
    }

    .logoDivInside {
        transform: translateX(44%);
    }

    .layui-logo img {
        width: 32px;
        margin-bottom: 4px;
        margin-right: 3px;
        display: inline-block;
        vertical-align: middle
    }

    .website-tabs-wrap {
        margin-top: 10px;
    }

    .layui-card {
        min-height: 380px;
    }

    .layui-card-body ul li a {
        font-size: 16px;
        color: black;
    }

    .layui-card-body ul li a:hover {
        color: #3775f9;
    }
</style>